<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>


.box {

background: red;
border: solid 1px black;
width:500px;
overflow: hidden; /*这句话就是用来裁剪内容,清除浮动*/

}

.left {

	background: blue;
	width:200px;

 float: left;

}

.right {

	background: green;
	width:200px;

  float: right;

}

		</style>
	</head>
	<body>


<!-- 解决子级使用浮动,父级无法包裹的问题 -->
<div class="box">
	<div class="left">
		<!-- <h2>左边</h2> -->
		颠三倒四多所
	</div>

	<div class="right">
		<!-- <h2>右边</h2> -->
		都是第三方
	</div>
</div>

	</body>
</html>
